<template>
  <div 
    ref="target" 
    class="modal-container pop-in" 
    :style="{ 
      top: mousePostion.top + 'px', 
      left: mousePostion.left + 'px', 
      display: visible ? 'block' : 'none' 
    }"
  >
    <img
      class="close-icon"
      src="@/assets/modal-close.png"
      alt=""
      @mousedown="$emit('updateVisible', false)"
    />
    <div class="extra">
      <span v-if="targetType === 'building'">{{ statusMap[targetDetail?.status] }}</span>
      <span v-else>{{ '占用率：' + targetDetail?.spaceProportion * 100 + '%' }}</span>
    </div>
    <div class="title">
      {{ targetType === 'building' ? targetDetail?.name : targetDetail?.areaName }}
    </div>
    <div class="info" v-if="targetType === 'building'">
      <div class="info-line">
        <span>楼层数：</span>
        <span>{{ targetDetail?.floors }}</span>
      </div>
      <div class="info-line">
        <span>总面积(m²)：</span>
        <span>{{ targetDetail?.area }}</span>
      </div>
      <div class="info-line">
        <span>承租单位：</span>
        <span>{{ targetDetail?.rentEnterpriseName || '暂无' }}</span>
      </div>
    </div>
    <div class="info" v-else>
      <div class="info-line">
        <span>空闲车位：</span>
        <span>{{ targetDetail?.remainSpaceNum }}</span>
      </div>
      <div class="info-line">
        <span>占用车位：</span>
        <span>{{ targetDetail?.occupancySpaceNum }}</span>
      </div>
      <div class="info-line">
        <span>停车位数：</span>
        <span>{{ targetDetail?.totalSpaceNum }}</span>
      </div>
      <div class="info-line">
        <span>面积(m²)：</span>
        <span>{{ targetDetail?.areaProportion }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'detail-modal',
    props: ['targetDetail', 'targetType','mousePostion', 'visible'],
    data() {
      return {
        statusMap: ['空置中', '租赁中'],
      }
    },
    mounted() {
      window.addEventListener('mousedown', this.mousedownHandler)
    },

    unmounted() {
      window.removeEventListener('mousedown', this.mousedownHandler)
    },
    
    methods: {
      mousedownHandler(e) {
        if (this.$refs.target.contains(e.target)) {
          return;
        } else {
          this.$emit('updateVisible', false)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .modal-container {
    position: absolute;
    background: url('@/assets/modal-bg.png') no-repeat 0 0 / cover;
    width: 300px;
    padding: 8px 10px 0;
  }
  .close-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 6px;
    right: 6px;
    cursor: pointer;
  }
  .extra {
    position: absolute;
    right: 12px;
    top: 42px;
    background: rgba(10, 26, 52, 0.6);
    border: 1px solid rgba(54, 135, 255, 0.7);
    border-radius: 1px;
    box-shadow: 0px 0px 5px 0.5px rgba(3, 251, 255, 0.65) inset;
    padding: 4px 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 12px;
  }
  .info {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }
  .info-line {
    margin-bottom: 10px;
  }
  .pop-in {
    -webkit-animation: fadeleftIn 0.4s;
    animation: fadeleftIn 0.4s;
    -webkit-animation-name: popIn;
    animation-name: popIn;
  }
  @keyframes popIn {
    0% {
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0.5, 0.5, 0.5);
      opacity: 0;
    }
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
      animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      opacity: 1;
    }
  }
</style>
